<template>
    <div>
        <a-card class="login-form-layout" :bordered="false">
            <h2 class="login-title">MY BONE 后台管理系统</h2>
            <a-form-model
                    :model="loginDto"
                    :rules="rules"
                    ref="form">
                <a-tabs
                        :activeKey="customActiveKey"
                        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
                        @change="handleTabClick">
                    <a-tab-pane key="tab1" tab="账号密码登录">
                        <a-form-model-item prop="username">
                            <a-input size="large" placeholder="请输入用户名" v-model="loginDto.username">
                                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                            </a-input>
                        </a-form-model-item>
                        <a-form-model-item prop="password">
                            <a-input size="large" :type="pwdType"
                                     placeholder="请输入密码" v-model="loginDto.password">
                                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                                <a-icon slot="suffix" :type="eyeType" style="color:rgba(0,0,0,.25)" @click="showPwd()"/>
                            </a-input>
                        </a-form-model-item>
                        <a-row>
                            <a-col span="16">
                                <a-form-model-item prop="captcha">
                                    <a-input size="large" placeholder="请输入验证码" v-model="loginDto.captcha">
                                        <a-icon slot="prefix" type="safety" style="color:rgba(0,0,0,.25)"/>
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col span="8">
                                <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage"
                                     @click="handleChangeCheckCode"/>
                                <img v-else style="margin-top: 2px;" src="../../assets/images/checkCode.png"
                                     @click="handleChangeCheckCode"/>
                            </a-col>
                        </a-row>
                        <a-button size="large" type="primary" style="width: 100%"
                                  @click.stop.prevent="login()"> 登录
                        </a-button>
                    </a-tab-pane>
                    <a-tab-pane key="tab2" tab="手机号登录">
                        <a-form-model-item prop="phone">
                            <a-input size="large" placeholder="请输入手机号" v-model="loginPhone.phone">
                                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                            </a-input>
                        </a-form-model-item>
                        <a-row>
                            <a-col span="14">
                                <a-form-model-item prop="code">
                                    <a-input size="large" placeholder="请输入验证码" v-model="loginPhone.code">
                                        <a-icon slot="prefix" type="safety" style="color:rgba(0,0,0,.25)"/>
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col span="10">
                                <a-button style="width: 90%;margin-left: 10%;" size="large" @click="getCode()"
                                          :disabled="closeButton">
                                    <span v-if="count!=''">({{count}}s)后重新获取</span>
                                    <span v-else>获取验证码</span>
                                </a-button>
                            </a-col>
                        </a-row>
                        <a-button size="large" type="primary" style="width: 100%"> 登录
                        </a-button>
                    </a-tab-pane>
                </a-tabs>
            </a-form-model>
        </a-card>
        <img :src="login_center_bg" class="login-center-layout">
    </div>
</template>

<script>
    import Vue from 'vue'
    import {getAction} from "../../api/master";
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import {userLogin} from "../../api/login";
    import login_center_bg from '@/assets/images/login_center_bg.png';

    export default {
        name: "Login",
        components: {ACol, ARow},
        data() {
            return {
                customActiveKey: "tab1",
                labelCol: {span: 6},
                wrapperCol: {span: 18},
                loginDto: {
                    username: '',
                    password: '',
                    captcha: '', // 验证码图片内容
                    checkKey: '',// 生成验证码的key
                },
                loginPhone: {
                    phone: '',
                    code: '',
                },
                rules: {
                    username: [
                        {required: true, message: '请填写用户名', trigger: 'blur'},
                        {min: 5, max: 20, message: '长度要在 5 ~ 20之间', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请填写密码', trigger: 'blur'},
                        {min: 5, max: 20, message: '长度要在 5 ~ 20之间', trigger: 'blur'},
                    ],
                    captcha: [
                        {required: true, message: '请填写验证码', trigger: 'blur'},
                        {min: 4, max: 4, message: '验证码的长度必须为4位', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: '请填写手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '请填写11位手机号', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '请填写验证码', trigger: 'blur'},
                    ],
                },
                requestCodeSuccess: false,
                randCodeImage: '',
                // 实现倒计时
                closeButton: false,
                timer: null,
                count: '',
                login_center_bg,
                pwdType: 'password',
                eyeType: 'eye-invisible',
            }
        },
        created() {
            this.handleChangeCheckCode();
        },
        methods: {
            showPwd() {
                if (this.pwdType === 'password') {
                    this.pwdType = 'text';
                    this.eyeType = 'eye';
                } else {
                    this.pwdType = 'password';
                    this.eyeType = 'eye-invisible';
                }
            },
            login() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        userLogin(this.loginDto).then(res => {
                            if (res.code === 200) {
                                this.$store.dispatch("LOGIN_INFO").catch(() => {
                                    this.$message.warning("无法获取抓取用户信息！")
                                });
                                this.$notification.success({message: '系统提示', description: '登录成功,欢迎回来!', duration: 2});
                                this.$store.commit('SET_NAME', this.loginDto);
                                console.log(this.$store.getters.username);
                                this.$router.push({path: "/",});
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                });
            },
            handleTabClick(key) {
                this.customActiveKey = key
                // this.form.resetFields()
            },
            handleChangeCheckCode() {
                this.loginDto.checkKey = new Date().getTime();
                getAction(`/system/sysUser/randomImage/${this.loginDto.checkKey}`).then(res => {
                    if (res.flag) {
                        this.randCodeImage = res.record;
                        this.requestCodeSuccess = true
                    } else {
                        this.$message.error(res.message);
                        this.requestCodeSuccess = false
                    }
                }).catch(() => {
                    this.requestCodeSuccess = false
                })
            },
            getCode() {
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.closeButton = true;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.closeButton = false;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            },
        }
    }
</script>

<style scoped>
    .login-form-layout {
        position: absolute;
        left: 0;
        right: 0;
        width: 400px;
        margin: 140px auto;
        border-top: 10px solid #409EFF;
        border-bottom: 5px solid #409EFF;
    }

    .login-title {
        text-align: center;
        color: #409EFF;
    }

    .login-center-layout {
        background: #409EFF;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin-top: 180px;
    }
</style>